<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>成绩录入</title>
    <link rel="stylesheet" href="{% static './layui/css/layui.css' %}">
  <style>
    body{
      padding: 50px;
    }
  </style>
</head>
<body>
<form class="layui-form" action="">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">python</label>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="number" name="python" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
      </div>
      <div class="layui-form-mid">分数</div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">javascript</label>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="number" name="javascript" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
      </div>
      <div class="layui-form-mid">分数</div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">linux</label>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="number" name="linux" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
      </div>
      <div class="layui-form-mid">分数</div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label"></label>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="hidden" name="id" value="{{id}}">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</body>
<script src="{% static './layui/layui.js' %}"></script>
<script src="{% static './jquery-3.7.1.min.js' %}"></script>
<script>
//Demo
layui.use(['upload', 'form','element'], function(){
  var $ = layui.jquery,
  form = layui.form,
  element = layui.element,
  upload = layui.upload;

  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    var city = $('#city option:selected').text()
    $.ajax({
        url:"{% url 'index:grade_add_api' %}",
        data: {
            "python":data.field.python,
            "javascript":data.field.javascript,
            "linux":data.field.linux,
            "id":data.field.id,
        },
        type: 'POST',
        success:function(result){
            // alert(111)
            // 缺失逻辑，成功之后很明显，要关闭弹窗，
            // 同时刷新table数据表格
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
            parent.layui.table.reload('test')
        }
    });
    return false;
  });

    //常规使用 - 普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: '{% url "index:upload_img" %}' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });

      element.progress('demo', '0%'); //进度条复位
      layer.msg('上传中', {icon: 16, time: 0});
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功的一些操作
      //……
      console.log(res.filepath)
      // $('#demoText').html(res.filepath); //置空上传失败的状态
      $('#demoText').val(res.filepath); //置空上传失败的状态
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
    //进度条
    ,progress: function(n, elem, e){
      element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
      if(n == 100){
        layer.msg('上传完毕', {icon: 1});
      }
    }
  });
});
</script>
</html>
